<script setup lang="ts">
import { computed } from 'vue';
import { IconStaus } from '../common/enums';

const props = defineProps<{ status: IconStaus }>();

const colorText = computed(() => {
    if (props.status == IconStaus.Error) {
        return "var(--el-color-danger)";
    }
    else if (props.status == IconStaus.Warning) {
        return "var(--el-color-warning)";
    }
    else {
        return "var(--el-color-success)";
    }
});

</script>
<template>
    <svg viewbox="0 0 12 12" width="12px" height="12px">
        <circle cx="50%" cy="50%" r="6" :fill="colorText" />
        <circle cx="50%" cy="50%" r="3" stroke="var(--color-white)" stroke-width="1" :fill="colorText" />
    </svg>
</template>